<template>
	<view class="box">

		<view class="from">
			<view class="title twoline-hide">
				{{info.title}}
			</view>
			<view class="vtitle">
			{{info.create_time}}
			</view>
			<view class="content">
			{{info.message}}
			</view>

			<view class="ltitle">
				图片
				<view class="xian"></view>
			</view>
			<u-album :urls="info.imgs_all" multipleSize="226rpx" :rowCount="2"></u-album>
			<view class="ltitle">
				平台回复
				<view class="xian"></view>
			</view>
			<view class="recover">
			{{info.admin_message || '客服正在处理中'}}
			</view>
		</view>

		<view class="btn" @click="fanhui">
			返回列表
		</view>
	</view>
</template>

<script>
	import {
		UserApi
	} from '@/api';
	export default {
		data() {
			return {
				urls2: [],
				info:{}
			};
		},
		async onLoad({
			id
		}) {
			try {
				if (!id) return uni.navigateBack({
					delta: 1
				})
				const res = await UserApi.FeedbacksInfo({
					id
				})
				this.info=res.result
			} catch (e) {
				//TODO handle the exception
			}

		},
		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		box-sizing: border-box;
		padding: 30rpx;
		padding-bottom: 150rpx;

		.btn {
			position: fixed;
			bottom: calc(30rpx + constant(safe-area-inset-bottom));
			bottom: calc(30rpx + env(safe-area-inset-bottom));
			left: 30rpx;
			width: 690rpx;
			height: 88rpx;
			border-radius: 50rpx;
			opacity: 1;
			background: linear-gradient(173.2deg, #f8b280 0%, #ff8b38 100%);
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-size: 30rpx;
		}

		.from {
			width: 100%;
			padding: 28rpx;
			box-sizing: border-box;
			background-color: #fff;

			.title {
				color: #111111;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
			}

			.vtitle {
				color: #999999;
				text-align: center;
				font-size: 22rpx;
				font-weight: 400;
				margin-top: 26rpx;
				margin-bottom: 42rpx;
			}

			.content {
				color: #333333;
				text-align: left;
				font-size: 24rpx;
				font-weight: 400;
			}

			.ltitle {
				color: #373737;
				text-align: left;
				font-size: 30rpx;
				font-weight: 400;
				position: relative;
				padding-left: 24rpx;
				margin-top: 50rpx;
				margin-bottom: 26rpx;

				.xian {
					position: absolute;
					left: 0;
					top: 0;
					width: 12rpx;
					height: 32rpx;
					border-radius: 50rpx;
					opacity: 1;
					border: 1rpx solid #d8d8d8;
					background: #fb8b07;
				}
			}

			.recover {
				color: #333333;
				text-align: left;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}
</style>